<template>
  <ClientOnly>
    <div class="relative h-screen w-full overflow-hidden">
      <!-- 动态粒子背景 -->
      <!-- <div class="absolute inset-0 z-0">
        <div v-for="i in 50" :key="i" class="absolute rounded-full animate-float"
          :class="particleClasses[i % particleClasses.length]" :style="{
            top: `${Math.random() * 100}%`,
            left: `${Math.random() * 100}%`,
            width: `${Math.random() * 20 + 5}px`,
            height: `${Math.random() * 20 + 5}px`,
            animationDuration: `${Math.random() * 5 + 3}s`,
            animationDelay: `${Math.random() * 2}s`
          }">
        </div>
      </div> -->

      <swiper-container ref="swiperRef" :slides-per-view="1" :loop="true" :autoplay-delay="5000"
        :autoplay-disable-on-interaction="true" :navigation="true" :pagination="true" class="h-full relative z-20">

        <swiper-slide v-for="(item, i) in artworks" :key="i">
          <div class="relative h-full w-full transform transition-transform duration-700 hover:scale-[1.02]">
            <!-- 艺术画作图像 -->
            <img :src="item.image" class="w-full h-full object-cover transition-all duration-700 hover:brightness-110"
              loading="lazy" :alt="item.title" />

            <!-- 动态渐变遮罩层 -->
            <div class="absolute inset-0 opacity-70 transition-all duration-700" :class="i % 3 === 0 ? 'bg-gradient-to-br from-blue-900/30 to-purple-900/50' :
              i % 3 === 1 ? 'bg-gradient-to-br from-amber-900/30 to-rose-900/40' :
                'bg-gradient-to-br from-emerald-900/30 to-teal-900/40'">
            </div>

            <!-- 装饰性艺术边框 -->
            <div class="absolute inset-0 border-[3px] border-white/20 pointer-events-none"></div>

            <!-- 艺术品信息卡片（玻璃拟态） -->
            <div
              class="absolute bottom-16 left-10 text-white p-8 rounded-2xl max-w-xl bg-gradient-to-r from-black/50 to-black/30 backdrop-blur-lg border border-white/10 shadow-2xl transition-all hover:bg-black/60 hover:scale-[1.02] cursor-pointer group"
              @click="showArtistStory(item.artistId)">

              <!-- 装饰性艺术家签名元素 -->
              <div
                class="absolute -top-4 right-6 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-700 rounded-full text-xs font-bold tracking-widest rotate-3 animate-bounce">
                签名认证
              </div>

              <h2
                class="text-5xl font-display mb-3 font-bold transform transition-transform group-hover:-translate-y-1 inline-block"
                :style="{ textShadow: '0 2px 10px rgba(0,0,0,0.5)' }">
                {{ item.artist }}
                <span class="text-3xl ml-2 text-amber-300">• {{ getCentury(item.artist) }}</span>
              </h2>

              <div class="w-16 h-1 bg-gradient-to-r from-amber-400 to-amber-600 mb-4 rounded-full"></div>

              <p class="text-lg mb-6 opacity-90 leading-relaxed max-h-20 overflow-hidden relative">
                {{ item.description }}
                <span
                  class="absolute bottom-0 right-0 bg-gradient-to-l from-black/80 to-transparent w-16 h-full"></span>
              </p>

              <button
                class="px-8 py-3 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-700 hover:to-amber-900 rounded-full transition-all flex items-center gap-3 group-hover:gap-4 shadow-lg hover:shadow-xl transform transition-transform group-hover:-translate-y-1">
                <span class="font-semibold tracking-wider">探索艺术家故事</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:animate-pulse" viewBox="0 0 20 20"
                  fill="currentColor">
                  <path fill-rule="evenodd"
                    d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
                    clip-rule="evenodd" />
                </svg>
              </button>
            </div>

            <!-- 艺术品标题装饰 -->
            <div class="absolute top-8 right-8 text-right max-w-xs">
              <div class="inline-block bg-black/60 backdrop-blur px-4 py-3 rounded-lg border border-white/10 rotate-3">
                <span class="text-xl font-display italic opacity-90">{{ item.title }}</span>
                <div class="w-full h-0.5 bg-gradient-to-r from-transparent via-amber-400 to-transparent mt-2"></div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper-container>

      <!-- 自定义导航按钮 -->
      <div class="absolute bottom-8 right-8 z-30 flex items-center space-x-4">
        <button @click="prevSlide"
          class="w-12 h-12 rounded-full bg-black/50 backdrop-blur flex items-center justify-center border border-white/20 hover:bg-amber-600 transition-all shadow-lg hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button @click="nextSlide"
          class="w-12 h-12 rounded-full bg-black/50 backdrop-blur flex items-center justify-center border border-white/20 hover:bg-amber-600 transition-all shadow-lg hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { SwiperContainer } from 'swiper/element'

interface Artwork {
  id: string
  title: string
  artist: string
  artistId: string
  image: string
  description: string
}

// 艺术品数据
const artworks: Artwork[] = [
  {
    id: '1',
    title: '星月夜',
    artist: '文森特·梵高',
    artistId: 'van-gogh',
    image: 'https://picsum.photos/id/10/3000/2000',
    description: '后印象派代表作，展现了阿尔勒夜晚的奇幻景象，旋转的星空与静谧的村落形成鲜明对比，充满情感张力的笔触展现了艺术家内心的澎湃激情。'
  },
  {
    id: '2',
    title: '睡莲',
    artist: '克劳德·莫奈',
    artistId: 'monet',
    image: 'https://picsum.photos/id/12/3000/2000',
    description: '印象派杰作，光影与色彩的精妙融合，展现了吉维尼花园池塘的四季变化，朦胧的笔触创造出梦幻般的视觉效果，捕捉了水面上瞬息万变的光影。'
  },
  {
    id: '3',
    title: '格尔尼卡',
    artist: '巴勃罗·毕加索',
    artistId: 'picasso',
    image: 'https://picsum.photos/id/13/3000/2000',
    description: '立体主义代表作，以黑白灰三色描绘战争苦难，成为反战象征。扭曲的人物形象和破碎的空间构图展现了战争带来的痛苦与混乱。'
  },
  {
    id: '4',
    title: '记忆的永恒',
    artist: '萨尔瓦多·达利',
    artistId: 'dali',
    image: 'https://picsum.photos/id/14/3000/2000',
    description: '超现实主义经典之作，融化的时钟象征着时间的主观性和记忆的流动性，荒凉的加泰罗尼亚海岸背景营造出梦幻而神秘的氛围。'
  }
]

const swiperRef = ref<SwiperContainer | null>(null)
const particleClasses = [
  'bg-amber-400/40', 'bg-purple-500/30', 'bg-cyan-400/30',
  'bg-rose-500/20', 'bg-emerald-400/20', 'bg-blue-400/20'
]

// 获取艺术家所属世纪
const getCentury = (artist: string): string => {
  const periods: Record<string, string> = {
    '文森特·梵高': '19世纪',
    '克劳德·莫奈': '19世纪',
    '巴勃罗·毕加索': '20世纪',
    '萨尔瓦多·达利': '20世纪'
  }
  return periods[artist] || '艺术大师'
}

// 导航控制
const prevSlide = () => {
  if (swiperRef.value) swiperRef.value.swiper.slidePrev()
}

const nextSlide = () => {
  if (swiperRef.value) swiperRef.value.swiper.slideNext()
}

const showArtistStory = (id: string) => {
  console.log('Showing artist story for:', id)
  // 实际项目中打开艺术家详情页或模态框
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Raleway:wght@300;400;500&display=swap');

.font-display {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

/* 粒子浮动动画 */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(3deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* 自定义Swiper样式 */
:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
  color: #FBBF24 !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

:deep(.swiper-button-prev:hover),
:deep(.swiper-button-next:hover) {
  background: rgba(123, 63, 0, 0.6);
  transform: scale(1.1);
}

:deep(.swiper-button-prev::after),
:deep(.swiper-button-next::after) {
  font-size: 24px;
  font-weight: bold;
}

:deep(.swiper-pagination-bullet) {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

:deep(.swiper-pagination-bullet-active) {
  background: #FBBF24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
  transform: scale(1.2);
}

/* 装饰元素 */
.rotate-3 {
  transform: rotate(3deg);
}

.-rotate-3 {
  transform: rotate(-3deg);
}

.group-hover\:-translate-y-1 {
  transition: transform 0.3s ease;
}

.group:hover .group-hover\:-translate-y-1 {
  transform: translateY(-4px);
}
</style>